page {
    padding: 30rpx;
}

.rank_list_warp {
    .list {
        .official {
            .title {
                font-size    : 40rpx;
                font-weight  : 600;
                margin-bottom: 30rpx;
            }

            .off_item {
                position     : relative;
                display      : flex;
                background   : #F9EAEF;
                padding      : 20rpx 0;
                padding-left : 30rpx;
                margin-bottom: 20rpx;
                align-items  : center;
                border-radius: 20rpx;

                .left {
                    .name {
                        font-weight  : 600;
                        margin-bottom: 10rpx;
                        font-size    : 40rpx;
                        color        : #E82F77;
                    }

                    .cover {
                        width : 120rpx;
                        height: 120rpx;

                        image {
                            width        : 100%;
                            height       : 100%;
                            border-radius: 20rpx;
                        }
                    }
                }

                .right {
                    margin-left: 30rpx;
                    font-size  : 22rpx;
                    color      : #6e696b;
                }

                .top {
                    font-size: 20rpx;
                    color    : #9C9296;
                    position : absolute;
                    top      : 10rpx;
                    right    : 10rpx;
                }
            }

        }

        .mutual {
            .title {
                font-size    : 40rpx;
                font-weight  : 600;
                margin-bottom: 30rpx;
            }

            .item_wrap {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .item {
                    position: relative;
                    width: 31%;
                    margin-bottom: 20rpx;
                    .cover {
                        // width: 32%;
                        image {
                            width: 100%;
                            border-radius: 20rpx;
                        }
                    }

                    .name {
                        height: 50rpx;
                        line-height: 50rpx;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .top {
                        font-size: 20rpx;
                        color    : #fff;
                        position : absolute;
                        top      : 10rpx;
                        right    : 10rpx;
                        background-color: rgba(0, 0, 0, .1);
                        border-radius: 50rpx;
                        padding: 5rpx 10rpx;

                    }
                }
            }


        }
    }
}